<script setup>
import {useStore} from "vuex";
import {computed} from "vue";
import boy from '../../assets/img/boy.png'
import girl from '../../assets/img/girl.png'
const store = useStore();
const props= defineProps({
  height:{
    type:String,
    required:true,
    default:'50vh'
  },
  btnFunc:{
    type:Function,
    required:true
  }
})
const bgi = computed(() => {
  return store.getters.getSexType === 'boy'? 'url(\''+boy+'\')' : 'url(\''+girl+'\')'
})

const sex = computed(()=>{
  return store.getters.getSexType === 'boy'? '男生' : '女生'
})
</script>
<template>
  <div class="root">
    <van-row class="m-row">
      <van-col offset="8" span="8" class="m-col">取出一张{{sex}}纸条</van-col>
    </van-row>
    <div class="m-center">
      <div class="m-item">
        <span class="m-text">分享一次/张</span>
      </div>
      <div class="extractButton">
        <van-button block color="#000000" @click="btnFunc">抽一张</van-button>
      </div>
    </div>
  </div>
</template>


<style scoped lang="less">
  .root{
    .m-row {
      .m-col {
        text-align: center;
      }

    }

    .m-center {
      box-sizing: border-box;
      padding-top: 2vh;
      height: v-bind("height");
      .m-item {
        width: 45%;
        background-size: 100% 100%;
        height: 80%;
        margin: 0 auto;
        background-image: v-bind("bgi");
        position: relative;
        .m-text{
          position: absolute;
          bottom: 1.7vh;
          left: 50%;
          transform: translateX(-50%);
          font-size: 2vw;
          color: #000;
        }
      }
      .extractButton {
        margin: 2vh 10% 0;
        overflow: hidden;
        border-radius: 8px;
      }
    }
  }
</style>
